<template>
  <div class="c-pb100 advertiseForm">
    <div class="c-fs24 c-fc-xblack c-ph24">
      <template v-for="(item, i) in formSetting">
        <div :key="i" class="c-p c-hh240 c-bd-b1 c-bg-gray" style="background-size: 100% 100%;margin: 0 -0.6rem" :style="{backgroundImage: `url(${item.image || 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/form-banner-default.png'})`}" v-if="item.type == 'basic'">
          <div class="c-translucent-balck60 c-pa c-w100 c-hh240 c-flex-column c-justify-center c-aligni-center ">
            <span class="c-fs28 c-fc-white c-fw-b c-mb10">{{item.name}}</span>
            <span class="c-inlineblack c-textAlign-c c-w80 c-fs24 c-fc-white">{{item.description}}</span>
          </div>
        </div>
        <div :key="i" class="c-bd-b1" v-if="item.type == 'name'">
          <div class="c-hh80 c-w100 c-flex-row c-justify-sb c-aligni-center c-flexw-wrap">
            <div class=""><span class="c-mr6 c-fc-xlred c-fs28">*</span>{{item.name}}</div>
            <div class=""><input type="text" maxlength="16" :readonly="record" v-model="tmpEditInfo.name" :placeholder="item.tip" class="c-textAlign-r c-fs24 c-bd0" @input="changeName(tmpEditInfo.name)" /></div>
          </div>
          <div class="c-pl16 c-fs20 c-mb20 c-fc-gray" v-if="item.description">{{item.description}}</div>
        </div>
        <div :key="i" class="c-bd-b1" v-if="item.type == 'contact'">
          <div class="c-hh80 c-w100 c-flex-row c-justify-sb c-aligni-center">
            <div class=""><span class="c-mr6 c-fc-xlred c-fs28">*</span>{{item.name}}</div>
            <div class=""><input type="tel" maxlength="11" :readonly="record" v-model="tmpEditInfo.mobile" :placeholder="item.tip" class="c-textAlign-r c-fs24 c-bd0" @input="changeMobile(tmpEditInfo.mobile)" /></div>
          </div>
          <div class="c-pl16 c-fs20 c-mb20 c-fc-gray" v-if="item.description">{{item.description}}</div>
        </div>

        <div :key="i" class="c-hh80 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center" v-if="item.type == 'contact' && item.checkbox && !record">
          <div class=""><span class="c-mr6 c-fc-xlred c-fs28">*</span>验证码</div>
          <div class="c-flex-row">
            <input type="tel" maxlength="4" placeholder="请输入短信验证码" :readonly="record" class="c-textAlign-r c-fs24 c-bd0" v-model="code" @input="code=code.slice(0, 4)">
            <div class="c-ml20 theme-bg-gradient c-fc-white c-br21 c-ww130 c-hh42 c-lh42 c-fs20 c-textAlign-c" @click="sendCode">{{textTip}}</div>
          </div>
        </div>
        <div :key="i" class="c-hh16 c-bg-f6" style="margin: 0 -0.6rem" v-if="item.type == 'split'"></div>
        <div :key="i" class="c-w100 c-pv20" v-if="item.type == 'text'">{{item.content}}</div>
        <div :key="i" class="c-w100" v-if="item.type == 'image'"><a href="javascript:void(0);" @click="goUrl(item.url)"><img :src="$addXossFilter(item.image, '')" class="c-w100" alt=""></a></div>

        <div :key="i" class="c-bd-b1" v-if="item.type == 'sex'">
          <div class="c-flex-row c-aligni-center c-justify-sb c-hh80">
            <div class=""><span class="c-mr6 c-fc-xlred c-fs28" v-if="item.checkbox == 1">*</span>{{item.name}}</div>
            <div class="c-flex-row c-aligni-center" v-if="sexData">
              <group class="c-w100 c-textAlign-r placeholder-gray">
                <popup-picker :themeColor="$getThemeColor()" @on-change="changeSexMethod" :disabled="record" :data="sexData" class="c-flex-grow1" :title="''" v-model="sexValue" placeholder="请选择"></popup-picker>
              </group>
              <div class="iconfont c-fs16 c-fc-gray c-ml10">&#xe60e;</div>
            </div>
          </div>
          <div class="c-pl16 c-fs20 c-mb20 c-fc-gray" v-if="item.description">{{item.description}}</div>
        </div>
        <div :key="i" class="c-bd-b1" v-if="item.type == 'birth'">
          <div class="c-flex-row c-aligni-center c-justify-sb c-hh80">
            <div class=""><span class="c-mr6 c-fc-xlred c-fs28" v-if="item.checkbox == 1">*</span>{{item.name}}</div>
            <div class="c-flex-row c-aligni-center">
              <group class="c-w100 c-textAlign-r placeholder-gray">
                <datetime :themeColor="$getThemeColor()" title="" :readonly="record" placeholder="请选择" v-model="tmpEditInfo.birthday" @on-change="changeBirthday" :start-date="startDate" :end-date="endDate"></datetime>
              </group>
              <div class="iconfont c-fs16 c-fc-gray c-ml10">&#xe60e;</div>
            </div>
          </div>
          <div class="c-pl16 c-fs20 c-mb20 c-fc-gray" v-if="item.description">{{item.description}}</div>
        </div>
        <div :key="i" class="c-bd-b1" v-if="item.type == 'grade'">
          <div class="c-flex-row c-aligni-center c-justify-sb c-hh80">
            <div class=""><span class="c-mr6 c-fc-xlred c-fs28" v-if="item.checkbox == 1">*</span>{{item.name}}</div>
            <div class="c-flex-row c-aligni-center" v-if="gradeList">
              <group class="c-w100 c-textAlign-r placeholder-gray">
                <popup-picker :themeColor="$getThemeColor()" :title="''" :placeholder="item.tip" :disabled="record" v-model="tmpEditInfo.grade" :data="gradeList" @on-change="changeGrade"></popup-picker>
              </group>
              <div class="iconfont c-fs16 c-fc-sgray c-ml10">&#xe60e;</div>
            </div>
          </div>
          <div class="c-pl16 c-fs20 c-mb20 c-fc-gray" v-if="item.description">{{item.description}}</div>
        </div>
        <div :key="i" class="c-bd-b1" v-if="item.type == 'wechat'">
          <div class=" c-hh80 c-w100 c-flex-row c-justify-sb c-aligni-center">
            <div class=""><span class="c-mr6 c-fc-xlred c-fs28" v-if="item.checkbox == 1">*</span>{{item.name}}</div>
            <div class=""><input type="text" :placeholder="item.tip" :readonly="record" class="c-textAlign-r c-fs24 c-bd0" v-model="tmpEditInfo.wxNo"></div>
          </div>
          <div class="c-pl16 c-fs20 c-mb20 c-fc-gray" v-if="item.description">{{item.description}}</div>
        </div>
        <div :key="i" class="c-bd-b1" v-if="item.type == 'address'">
          <div class="c-flex-row c-aligni-center c-justify-sb c-hh80">
            <div class="c-flex-shrink0"><span class="c-mr6 c-fc-xlred c-fs28" v-if="item.checkbox == 1">*</span>{{item.name}}</div>
            <div class="c-flex-row c-aligni-center c-justify-end" v-if="addressDataList">
              <group class="c-textAlign-r placeholder-gray">
                <x-address :themeColor="$getThemeColor()" :title="''" :disabled="record" @on-shadow-change="onShadowChange" v-model="addrValue" :list="addressDataList" :rawValue="true" :placeholder="item.format == 1 ? '省':item.format == 2 ? '省 / 市' : '省 / 市 / 区（县）'" :show.sync="showAddress" class="c-flex-grow1"></x-address>
              </group>
              <div class="iconfont c-fs16 c-fc-sgray c-ml10" v-if="addressData == ''">&#xe60e;</div>
            </div>
          </div>
          <div class="c-pl16 c-fs20 c-mb20 c-fc-gray" v-if="item.description">{{item.description}}</div>
        </div>
        <div :key="i" class="c-bd-b1" v-if="item.type == 'address' && item.format == 4">
          <div class=" c-hh80 c-w100 c-flex-row c-justify-end c-aligni-center">
            <div class=""><input type="text" :placeholder="item.tip" :readonly="record" class="c-textAlign-r c-fs24 c-bd0" v-model="tmpEditInfo.address"></div>
          </div>
        </div>
        <block :key="i" v-if="item.type == 'custom'">
          <div v-if="item.dataType != 4 && item.dataType != 5 && item.dataType != 8" class="c-flex-row c-aligni-center c-justify-sb c-hh80 c-bd-b1">
            <div class=""><span class="c-mr6 c-fc-xlred c-fs28" v-if="item.checkbox == 1">*</span>{{item.name}}</div>
            <div class="c-flex-row c-aligni-center c-w70">
              <group v-if="item.dataType == 6 && addressDataList.length > 0" class="c-w100 c-textAlign-r c-fc-xblack addressSelected">
                <x-address :themeColor="$getThemeColor()" :title="''" @on-hide="hideAddrss(item.id)" v-model="customValue[item.id].ids" :list="addressDataList" placeholder="请选择地址" class="c-flex-grow1"></x-address>
              </group>
              <popup-picker v-if="item.dataType == 7" :themeColor="$getThemeColor()" :title="''" v-model="customValue[item.id]" placeholder="请选择" :data="item.selectList" class="c-flex-grow1 sexPlaceholder"></popup-picker>
              <group v-if="item.dataType == 3" class="birthdayPlaceholder c-w100 c-textAlign-r">
                <datetime title="" :themeColor="$getThemeColor()" v-model="customValue[item.id]" placeholder="请选择日期"></datetime>
              </group>
              <div v-if="item.dataType == 3 || item.dataType == 6 || item.dataType == 7" class="iconfont c-fs16 c-fc-sgray c-ml10">&#xe60e;</div>
              <input v-if="item.dataType == 2" type="number" placeholder="请输入数字" v-model="customValue[item.id]" class="c-fc-xblack c-textAlign-r c-fs24 c-bd0 c-w100"/>
              <input v-if="item.dataType == 1" type="text" maxlength="60" placeholder="请输入60个以内的字" v-model="customValue[item.id]" class="c-fc-xblack c-textAlign-r c-fs24 c-bd0 c-w100"/>
            </div>
          </div>
          <div v-else-if="item.dataType == 4 || item.dataType == 5 || item.dataType == 8" class="c-bd-b1 c-pv28"><!--单选，多选，多文本-->
            <div class=""><span class="c-mr6 c-fc-xlred c-fs28" v-if="item.checkbox == 1">*</span>{{item.name}}</div>
            <div class="c-w100">
              <textarea-com v-if="item.dataType == 8" class="textareaClass c-pt28" placeholder="请输入200个以内的字" :value="customValue[item.id]" @onChangeInput="customValue[item.id] = $event" maxLength="200" :showLength="true" @focus='inputFocus' @on-blur='inputBlur(item)'></textarea-com>
              <!-- 单选 -->
              <block v-if="item.dataType == 4">
                <div v-for="(sitem, sindex) in item.selectList" :key="sindex" class="c-flex-row c-aligni-center c-pt28" @click="customValue[item.id] = sitem.id">
                  <i class="iconfont c-fs26 c-mr16" :class="getCustValue(item.id) == sitem.id ? 'theme-fc' : 'c-fc-gray'">{{getCustValue(item.id) == sitem.id ? '&#xe6b1;' : '&#xe6f7;'}}</i>
                  <span>{{ sitem.title }}</span>
                </div>
              </block>

              <!-- 多选 -->
              <block v-if="item.dataType == 5">
                <div v-for="(ditem, dindex) in item.selectList" :key="dindex" class="c-flex-row c-aligni-center c-w100 c-pt28" @click="custSelectMu(item.id, ditem.id)">
                  <span class="c-mr16 mt2 c-ww24 c-hh24" :class="getCustValue(item.id) != '' && getCustValue(item.id).indexOf(ditem.id) > -1 ? 'theme-bg' : 'c-bg-white c-bd1-gray'">
                    <i class="iconfont c-fs20 c-fc-white" :class="getCustValue(item.id) != '' && getCustValue(item.id).indexOf(ditem.id) > -1 ? 'check-trans' : ''">{{getCustValue(item.id) != '' && getCustValue(item.id).indexOf(ditem.id) > -1 ? '&#xe6ea;' : ''}}</i>
                  </span>
                  <span class="c-w100">{{ ditem.title }}</span>
                </div>
              </block>
            </div>
          </div>
        </block>
      </template>
    </div>
    <!-- 底栏 -->
    <div class="c-pf c-maxw640 c-pz100 c-p-b0 c-w100 c-bg-white c-hh100 c-flex-row c-aligni-center c-justify-end c-ph24">
      <div v-if="status == 1 && !record" class="c-hh64 theme-bg-gradient c-br40 c-fc-white c-fs28 c-flex-row c-aligni-center c-justify-center c-w100" @click="save">立即报名</div>
      <div v-if="status == 1 && record" class="c-hh64 c-bg-ccc c-br40 c-fc-white c-fs28 c-flex-row c-aligni-center c-justify-center c-w100">已报名</div>
      <div v-if="status == 2" class="c-hh64 c-bg-ccc c-br40 c-fc-white c-fs28 c-flex-row c-aligni-center c-justify-center c-w100">已结束</div>
    </div>
    <my-loading :showLoading="isLoading"></my-loading>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common";
import { Datetime, PopupPicker, XAddress } from 'ckjrweb-mp-ui/src/components/index';
import myLoading from "@/plugin/loading/loading.vue";
import textareaCom from "@/components/templates/common/textareaCom.vue"
let inputScrollTop = 0;
let num = 60;
let isClickBtn = false;
export default {
  name: 'AdvertiseForm',
  components: {
    Datetime,
    PopupPicker,
    XAddress,
    myLoading,
    textareaCom
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      addressData: "",
      sexValue: [],
      sexData: [["男", "女"]],
      showAddress: false,
      isClick: false,
      interval: null,
      textTip: "获取验证码",
      fromType: "", //0表示新增学员 1表示编辑学员信息 2表示面授课学员管理中编辑 3 从学员管理来的添加
      requiredFields: null, // 必填
      grade: [],
      gradeList: [['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三', '高一', '高二', '高三', '大学', '其他']],
      address: '',
      code: "",
      addrValue: [],
      addressDataList: '',
      tmpEditInfo: {
        areaCode: 0,
        birthday: '',
        cityCode: 0,
        grade: [],
        mobile: "",
        provinceCode: 0,
        name: "",
        sex: "",
        wxNo: "",
        address: "",
      },
      formSetting: [],
      shareData: {},
      status: 1,
      record: false, // 是否已提交过该表单
      isLoading: false,
      startDate: "1920-01-01", //默认从2000年起
      endDate: utilJs.dateFormat(Date.now()),
      customValue: {}, //自定义字段
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    //获取表单设置
    getFormRecord() {
      utilJs.getMethod(global.apiurl + "educationSystem/enrollForm/" + this.$route.query.id, res => {
        function findTarget(type) {
          return res.formItem.filter(item => item.type == type)[0]
        }
        let clist = res.formItem.filter(item => item.type == 'custom');
        for (let i = 0; i < clist.length; i++) {
          if (clist[i].dataType == 5 || clist[i].dataType == 7) { //多选
            this.$set(this.customValue, clist[i].id, []);
          } else if (clist[i].dataType == 6) {
            let obj = {
              ids: [],
              names: []
            }
            this.$set(this.customValue, clist[i].id, obj);
          } else {
            this.$set(this.customValue, clist[i].id, '');
          }
        }
        this.record = res.record == 1 ? true : false;
        this.status = res.status;
        this.formSetting = res.formItem;
        this.shareData = {
          wxDesc: res.wxDesc,
          wxImage: res.wxImage,
          wxName: res.wxName,
        }
        this.wechatShare()
        if (res.record) { // 如果有提交记录则拉取
          this.tmpEditInfo = {
            areaCode: findTarget('address') && findTarget('address').value.areaCode,
            birthday: findTarget('birth') && findTarget('birth').value,
            cityCode: findTarget('address') && findTarget('address').value.cityCode,
            grade: findTarget('grade') && [this.gradeList[0][findTarget('grade').value - 1]],
            mobile: findTarget('contact') && findTarget('contact').value,
            provinceCode: findTarget('address') && findTarget('address').value.provinceCode,
            name: findTarget('name') && findTarget('name').value,
            sex: findTarget('sex') && findTarget('sex').value,
            wxNo: findTarget('wechat') && findTarget('wechat').value,
            address: findTarget('address') && findTarget('address').value.address,
          }
          if (findTarget('sex')) {
            this.changeSexMethod(findTarget('sex').value)
          }
          if (findTarget('address') && this.tmpEditInfo.provinceCode != 0 && this.tmpEditInfo.cityCode != 0 && this.tmpEditInfo.areaCode != 0) {
            this.$nextTick(() => {
              this.addrValue = [this.tmpEditInfo.provinceCode + '', this.tmpEditInfo.cityCode + '', this.tmpEditInfo.areaCode + ''];
            })
          }
          if (res.customValue && res.customValue != null) {
            for (let key in this.customValue) {
              if (res.customValue[key]) {
                this.customValue[key] = res.customValue[key];
              }
            };
          }
        }
      });
    },
    onShadowChange(ids, names) {
      this.tmpEditInfo.provinceCode = Number(ids[0]);
      this.tmpEditInfo.cityCode = Number(ids[1]);
      this.tmpEditInfo.areaCode = Number(ids[2]);
    },
    changeName(name) {
      this.tmpEditInfo.name = name;
    },
    changeMobile(mobile) {
      this.tmpEditInfo.mobile = mobile;
    },
    changeSexMethod(val) {
      this.changeSex = val.toString() == '男' || val == 1 ? 1 : val.toString() == '女' || val == 2 ? 2 : '';
      this.sexValue = this.changeSex == 1 ? ['男'] : this.changeSex == 2 ? ['女'] : '';
      this.tmpEditInfo.sex = this.changeSex;
    },
    changeGrade(val) {
      this.tmpEditInfo.grade = val;
    },

    getCode() {
      num--;
      this.textTip = num + "s";
      if (num == 0) {
        this.textTip = "发送验证码";
        num = 60;
        this.isClick = false;
        clearInterval(this.interval);
      }
    },
    sendCode() {
      if (!this.isClick) {
        this.isClick = true;
        this.interval = setInterval(this.getCode, 1000);
        utilJs.postMethod(global.apiurl + "educationSystem/student/sms", { mobile: this.tmpEditInfo.mobile }, res => {
        }, failRes => {
          this.isClick = false;
          num = 60;
          this.textTip = "发送验证码";
          clearInterval(this.interval)
        });
      }
    },
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur(item) {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
    },
    hideAddrss(id) { //自定义的地址
      let addrArr = this.customValue[id].ids;
      let names = [];
      let ns = this.addressDataList.filter(ele => ele.value == addrArr[0] || ele.value == addrArr[1] || ele.value == addrArr[2]);
      addrArr.forEach(ids => {
        ns.forEach(ele => {
          if (ele.value == ids) {
            names.push(ele.name);
          }
        });
      });
      this.$set(this.customValue[id], 'names', names);
    },
    //自定义多选
    custSelectMu(pid, cid) {
      if (this.customValue[pid].indexOf(cid) > -1) {
        this.customValue[pid].splice(this.customValue[pid].indexOf(cid), 1);
      } else {
        this.customValue[pid].push(cid);
      }
    },
    //自定义，通过id，或者对应的value
    getCustValue(id) {
      return this.customValue[id] || '';
    },
    // 检查表单是否填写完整
    checkInput(type, fitem) {
      switch (type) {
        case 'name':
          if (this.tmpEditInfo.name == "") {
            this.$showCjToast({
              text: "请输入姓名",
              type: "warn",
            });
            return true;
          }
          break;
        case 'contact':
          if (this.tmpEditInfo.mobile == '') {
            this.$showCjToast({
              text: "请输入手机号码",
              type: "warn",
            });
            return true;
          } else if (!utilJs.isPhoneNumber(this.tmpEditInfo.mobile)) {
            this.$showCjToast({
              text: "请输入有效手机号",
              type: "warn",
            });
            return true;
          } else if (!this.code && this.formSetting.some(item => item.type == 'contact') && this.formSetting.filter(item => item.type == 'contact')[0].checkbox) {
            this.$showCjToast({
              text: "请输入验证码",
              type: "warn",
            });
            return true;
          }
          break;
        case 'birth':
          if (this.tmpEditInfo.birthday == '' && this.formSetting.some(item => item.type == 'birth') && this.formSetting.filter(item => item.type == 'birth')[0].checkbox) {
            this.$showCjToast({
              text: "请选择生日",
              type: "warn",
            });
            return true;
          }
          break;
        case 'sex':
          if (!this.tmpEditInfo.sex && this.formSetting.some(item => item.type == 'sex') && this.formSetting.filter(item => item.type == 'sex')[0].checkbox) {
            this.$showCjToast({
              text: "请选择性别",
              type: "warn",
            });
            return true;
          }
          break;
        case 'wechat':
          if (!this.tmpEditInfo.wxNo && this.formSetting.some(item => item.type == 'wechat') && this.formSetting.filter(item => item.type == 'wechat')[0].checkbox) {
            this.$showCjToast({
              text: "请填写微信号",
              type: "warn",
            });
            return true;
          }
          break;
        case 'grade':
          let gradeIndex = null;
          this.gradeList[0].forEach((item, index) => {
            if (item == this.tmpEditInfo.grade[0]) {
              gradeIndex = index;
            }
          })
          if (gradeIndex == null && this.formSetting.some(item => item.type == 'grade') && this.formSetting.filter(item => item.type == 'grade')[0].checkbox) {
            this.$showCjToast({
              text: "请选择年级",
              type: "warn",
            });
            return true;
          }
          break;
        case 'address':
          if (this.formSetting.some(item => item.type == 'address') && this.formSetting.filter(item => item.type == 'address')[0].checkbox) {
            if (!this.addrValue.length) {
              this.$showCjToast({
                text: "请选择联系地址",
                type: "warn",
              });
              return true;
            }
            if (!this.tmpEditInfo.address && this.formSetting.filter(item => item.type == 'address')[0].format == 4) {
              this.$showCjToast({
                text: "请填写详细地址",
                type: "warn",
              });
              return true;
            }
          }
          break;
        case 'custom':
          if (fitem.checkbox == 1) { //必填
            if (fitem.dataType == 5 || fitem.dataType == 6 || fitem.dataType == 7) {
              if (((fitem.dataType == 5 || fitem.dataType == 7) && this.customValue[fitem.id].length == 0) || (fitem.dataType == 6 && this.customValue[fitem.id] && this.customValue[fitem.id].ids.length == 0)) {
                this.$showCjToast({
                  text: "请选择" + fitem.name,
                  type: "warn",
                });
                return true;
              }
            } else {
              if (this.customValue[fitem.id] == '') {
                let t = fitem.dataType == 4 || fitem.dataType == 3 ? "请选择" : '请输入';
                this.$showCjToast({
                  text: t + fitem.name,
                  type: "warn",
                });
                return true;
              }
            }
          }
          break;
        default:
          break;
      }
    },
    save() {
      // 根据后台传过来的验证顺序验证用户是否填写
      for (let i = 0; i < this.formSetting.length; i++) {
        if (this.checkInput(this.formSetting[i].type, this.formSetting[i])) {
          return;
        }
      }
      let gradeIndex = null;
      this.gradeList[0].forEach((item, index) => {
        if (item == this.tmpEditInfo.grade[0]) {
          gradeIndex = index;
        }
      })
      if (isClickBtn) {
        return;
      }
      if (this.isLoading) {
        return;
      }
      isClickBtn = true;
      this.isLoading = true;
      let data = {
        name: this.tmpEditInfo.name,
        mobile: this.tmpEditInfo.mobile,
        birthday: this.tmpEditInfo.birthday,
        grade: gradeIndex == null ? '' : gradeIndex + 1,
        sex: this.tmpEditInfo.sex,
        wxNo: this.tmpEditInfo.wxNo,
        provinceCode: this.tmpEditInfo.provinceCode,
        cityCode: this.tmpEditInfo.cityCode,
        areaCode: this.tmpEditInfo.areaCode,
        provinceName: (this.addrValue.length && this.addressDataList.filter(item => item.value == this.tmpEditInfo.provinceCode)[0].name) || '',
        cityName: (this.addrValue.length && this.addressDataList.filter(item => item.value == this.tmpEditInfo.cityCode)[0].name) || '',
        areaName: (this.addrValue.length && this.addressDataList.filter(item => item.value == this.tmpEditInfo.areaCode)[0].name) || '',
        address: this.tmpEditInfo.address,
        formId: this.$route.query.id,
        code: this.code,
        customValue: this.customValue
      }
      if (!this.addrValue.length) {
        data.provinceCode = 0;
        data.cityCode = 0;
        data.areaCode = 0;
      }
      utilJs.postMethod(global.apiurl + "educationSystem/enrollForm", data, res => {
        isClickBtn = false;
        this.isLoading = false;
        this.$showCjToast({
          text: "成功",
          type: "success",
          time: 2000,
        });
        this.record = true
      }, failRes => {
        isClickBtn = false;
        this.isLoading = false;
      });
    },
    getAddress() {
      utilJs.getMethod(`${global.apiurl}common/getAreaListForAgent`, res => {
        this.addressDataList = res.data;
        this.getFormRecord()
      }, failRes => {
      });
    },
    //跳转到图片指定的位置
    goUrl(urlStr) {
      if (utilJs.isIOSAppALL()) {
        return;
      }
      if (urlStr && urlStr != "") {
        if (urlStr.includes("http") || urlStr.includes("https")) {
          utilJs.locationHref(urlStr);
        } else {
          utilJs.locationHref("http://" + urlStr);
        }
      }
    },
    //微信分享
    wechatShare() {
      let title = this.shareData.wxName;
      let shareImg = this.shareData.wxImage;
      let shareUrl = `${window.location.href.split("#")[0]}#/edu/advertiseForm?id=${this.$route.query.id}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.shareData.wxDesc;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.shareData.wxName;
      let shareImg = this.shareData.wxImage;
      let shareUrl = `${window.location.href.split("#")[0]}#/edu/advertiseForm?id=${this.$route.query.id}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.shareData.wxDesc;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  activated() {
    setDocumentTitle("招生表单");// eslint-disable-line
    this.textTip = "获取验证码";
    clearInterval(this.interval);
    this.interval = null;
    this.isClick = false;
    isClickBtn = false;
    this.isLoading = false;
    this.code = "";
    this.interval = null;
    this.changeSex = 0;
    this.tmpEditInfo = {
      areaCode: 0,
      birthday: '',
      cityCode: 0,
      grade: [],
      mobile: "",
      provinceCode: 0,
      name: "",
      sex: "",
      wxNo: "",
      address: "",
    }
    this.addrValue = [];
    this.addressData = '';
    this.requiredFields = null;
    this.customValue = {};
    this.getAddress();
  },
  deactivated() {
    clearInterval(this.interval);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.placeholder-gray >>> .vux-cell-placeholder {
  color: #cccccc;
}
.advertiseForm /deep/ .loading-status {
  z-index: 10000!important;
}
/* 重置样式 */
.advertiseForm /deep/ .vux-cell-value {
  color: #333!important;
}
.advertiseForm /deep/ .vux-tap-active:active,
.weui-cell_access:active {
  background-color: #fff!important;
}
.textareaClass /deep/ textarea{
  resize: none;
  height: 3rem;
}
</style>
